<!DOCTYPE html >

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Pet Shop</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../static/css/style.css" th:href="@{../css/style.css}" rel="stylesheet" type="text/css"/>
    <!--[if IE 6]>
    <link href="../../../static/css/ie6.css" th:href="../css/ie6.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <!--[if IE 7]>
    <link href="../../../static/css/ie7.css" th:href="../css/ie7.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <style>
        a {
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id="header">
    <a href="index.html" id="logo"><img src="../../../static/images/logo.gif" th:src="@{../images/logo.gif}" width="310"
                                        height="114" alt="" title=""/></a>
    <ul class="navigation">
        <li><a href="/petIndex/">首页</a></li>
        <li class="active"><a href="/petMart/jumpToPetMart">宠物商店</a></li>
        <li><a href="/blog/">博客</a></li>
        <li><a href="blog.html">关于我们</a></li>
        <li><a href="petguide.html">向导</a></li>
        <li><a href="contact.html">后台登录</a></li>
    </ul>
</div>

<div id="body">

    <div id="content">

        <div class="search">
            <form action="/petMart/jumpToPetMart">
                <input type="text" name="msg2" value="Find" id="serchText"/>
                <button>&nbsp;</button>
                <label for="articles"><input type="radio" id="articles" name="msg1" value="blog"/> 文章</label>
                <label for="products"><input type="radio" id="products" name="msg1" value="petPro" checked="checked"/>
                    宠物商品</label>
            </form>
        </div>

        <div class="content">
            <ul id="listPro">
                <li class="jumpProduces" th:each="obj : ${listPro}" th:if="${not #lists.isEmpty(listPro)}">
                    <a><img src="../../../static/images/koi2.jpg" th:src="@{${obj.image}}" width="140"
                                              height="250" alt="Pet Shop" title="Pet Shop"/></a>
                    <h2 th:text="${obj.proName}"></h2>
                    <span th:text="${obj.id}" style="display: none"></span>
                    <span th:text="${obj.price}"></span>
                    <span th:text="${obj.text}"></span>
                    <span><a class="more">View all</a></span>
                </li>
            </ul>
        </div>

        <div style="text-align: center"><span th:text="${msg}" th:if="${not #lists.isEmpty(msg)}"
                                              style="font-size: 19px"></span></div>

        <div id="sidebar">
            <a href="petmart.html"><img src="../../../static/images/discount.jpg" th:src="@{../images/discount.jpg}"
                                        width="300" height="790" alt="Pet Shop" title="Pet Shop"/></a>

        </div>
    </div>

    <div class="pagination">

        <ul style="margin-right: 400px;margin-left: 400px;margin-bottom: 0px;margin-top: 0px;" id="pages">
            <li><a id="front" style="color: #FFAD00">上一页</a></li>
            <li th:each="i : ${countPage}" th:if="${i lt 6}">
                <a class="pageNumber" th:text="${i}"></a>
            </li>
            <li><a id="next" style="color: #FFAD00">下一页</a></li>
        </ul>

    </div>

    <div class="featured">
        <ul>
            <li><a href="index.html"><img src="../../../static/images/organic-and-chemical-free.jpg"
                                          th:src="@{../images/organic-and-chemical-free.jpg}" width="300" height="90"
                                          alt="Pet Shop" title="Pet Shop"/></a></li>
            <li><a href="index.html"><img src="../../../static/images/good-food.jpg" th:src="@{../images/good-food.jpg}"
                                          width="300" height="90" alt="Pet Shop" title="Pet Shop"/></a></li>
            <li class="last"><a href="index.html"><img src="../../../static/images/pet-grooming.jpg"
                                                       th:src="@{../images/pet-grooming.jpg}" width="300" height="90"
                                                       alt="Pet Shop" title="Pet Shop"/></a></li>
        </ul>

    </div>


</div>

<div id="footer">
    <div class="section">
        <ul>
            <li>
                <img src="../../../static/images/friendly-pets.jpg" th:src="@{../images/friendly-pets.jpg}" width="240"
                     height="186" alt="Pet Shop" title="Pet Shop"/>
                <h2><a href="index.html">Friendly Pets</a></h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adepiscing elit, sed diam nonummy nib. <a class="more"
                                                                                                       href="index.html">Read
                    More</a>
                </p>
            </li>
            <li>
                <img src="../../../static/images/pet-lover2.jpg" th:src="@{../images/pet-lover2.jpg}" width="240"
                     height="186" alt="Pet Shop" title="Pet Shop"/>
                <h2><a href="index.html">How dangerous are they</a></h2>
                <p>
                    Lorem ipsum dolor sit amet, cons ectetuer adepis cing, sed diam euis. <a class="more"
                                                                                             href="index.html">Read
                    More</a>
                </p>
            </li>
            <li>
                <img src="../../../static/images/healthy-dog.jpg" th:src="@{../images/healthy-dog.jpg}" width="240"
                     height="186" alt="Pet Shop" title="Pet Shop"/>
                <h2><a href="index.html">Keep them healthy</a></h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adepiscing elit, sed diam nonu mmy. <a class="more"
                                                                                                    href="index.html">Read
                    More</a>
                </p>
            </li>
            <li>

                <h2><a href="index.html">Love...love...love...pets</a></h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adepiscing elit, sed diameusim. <a class="more"
                                                                                                href="index.html">Read
                    More</a>
                </p>
                <img src="../../../static/images/pet-lover.jpg" th:src="@{../images/pet-lover.jpg}" width="240"
                     height="186" alt="Pet Shop" title="Pet Shop"/>
            </li>
        </ul>
    </div>
    <div id="footnote">
        <div class="section">
            copy; 2011 <a href="index.html">Petshop</a>. All rights reserved.;<a href="http://www.cssmoban.com"
                                                                                 title="????" target="_blank">????</a>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" src="../../../static/js/jquery-3.3.1.min.js"
        th:src="@{../js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" src="../../../static/js/vue.js" th:src="@{../js/vue.js}"></script>
<script type="text/javascript" src="../../../static/js/sockjs.min.js" th:src="@{../js/sockjs.min.js}"></script>
<script type="text/javascript" src="../../../static/js/stomp.min.js" th:src="@{../js/stomp.min.js}"></script>
<script type="text/javascript" src="../../../static/js/petmart/petmart.js"
        th:src="@{../js/petmart/petmart.js}"></script>
<script type="text/javascript" th:inline="javascript">

</script>
</html>